<template>
  <detailbox title="查看"  @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div></div>
      <div class="">
        <el-button type="primary" size="small" plain @click="openDialg('print')">打印</el-button>
        <el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
      </div>
    </div>
    <el-row class="mt10">
      <el-col :span="12">
        <basic-container>
          <div class="main_title success_f"><b>管理信息</b></div>
          <el-divider></el-divider>
          <div class="mb20">
            <span class="index_num success_bg">1</span>
            <b class="f14">基础信息</b>
          </div>

          <table class="table1 owntable mb20 " border="0" cellspacing="0" cellpadding="1" style="width: 100%;">
            <tr>
              <td width="150">产品UDI管理编号</td>
              <td>{{ detail.name }}</td>
              <td width="150">数据是否同步上传医疗器械唯一标识数据库</td>
              <td>{{ detail.fileType == '0' ? '医疗器械' : '体系运行' }}</td>
            </tr>
            <tr>
              <td width="150">医疗器械唯一标识编码体系名称</td>
              <td colspan="3">医疗器械唯一标识编码体系名称</td>
            </tr>
          </table>

          <div class="f14 mb20" style="margin-top: 40px;">产品标识基本信息如下：</div>
          <table class="table1 owntable mb20 " border="0" cellspacing="0" cellpadding="1" style="width: 100%;">
            <tr>
              <td colspan="6"><b>产品UDI最小销售单元产品标识</b></td>
            </tr>
            <tr>
              <td width="130">最小销售单元产品标识编码种类</td>
              <td colspan="5">医疗器械唯一标识编码体系名称</td>
            </tr>
            <tr style="background: #F5F7FA;">
              <td>应用标识符（AI）</td>
              <td>包装指示符</td>
              <td>医疗器械注册人/备案人识别代码</td>
              <td>包装指示符</td>
              <td>商品项目编码</td>
              <td>校验码</td>
            </tr>
            <tr>
              <td class="white_bg">应用标识符（AI）</td>
              <td>包装指示符</td>
              <td class="white_bg">医疗器械注册人/备案人识别代码</td>
              <td>包装指示符</td>
              <td class="white_bg">商品项目编码</td>
              <td>校验码</td>
            </tr>
            <tr>
              <td colspan="6"><b>使用单元产品标识</b> </td>
            </tr>
            <tr>
              <td>最小销售单元中使用单元的数量</td>
              <td colspan="5">医疗器械唯一标识编码体系名称</td>
            </tr>
            <tr>
              <td>使用单元产品标识编码种类</td>
              <td colspan="5">医疗器械唯一标识编码体系名称</td>
            </tr>
            <tr style="background: #F5F7FA;">
              <td>应用标识符（AI）</td>
              <td>包装指示符</td>
              <td>医疗器械注册人/备案人识别代码</td>
              <td>包装指示符</td>
              <td>商品项目编码</td>
              <td>校验码</td>
            </tr>
            <tr>
              <td class="white_bg">应用标识符（AI）</td>
              <td>包装指示符</td>
              <td class="white_bg">医疗器械注册人/备案人识别代码</td>
              <td>包装指示符</td>
              <td class="white_bg">商品项目编码</td>
              <td>校验码</td>
            </tr>
          </table>

          <table class="owntable mb20 table1" border="0" cellspacing="0" cellpadding="1" style="width: 100%;" v-if="detail.isUpgrade">
            <tr>
              <td style="width: 80px;">升版原因</td>
              <td class="white_bg">{{ detail.reason }}</td>
            </tr>
          </table>

          <div class="mb20">
            <span class="index_num success_bg">2</span>
            <b class="f14">工作文件</b>
          </div>
          <table class="mb20 owntable" border="0" cellspacing="0" cellpadding="1" style="width: 100%;">
            <tr>
              <td class="white_bg flex_between">
                <span class="pointer main_co">{{ detail.templateFile.substring(detail.templateFile.lastIndexOf('/') + 1) }}</span>
                <div>
                  <el-button size="mini" v-if="detail.isSystemCover == '1'">封面预览</el-button>
                  <!-- <el-button size="mini">内容预览</el-button> -->
                  <el-checkbox class="ml10" v-model="check"></el-checkbox>
                </div>
              </td>
            </tr>
          </table>
        </basic-container>
      </el-col>
      <el-col :span="12">
        <basic-container>
          <div class="main_title warn_f"><b>工作流信息</b></div>
          <el-divider></el-divider>
          <div class="mb20">
            <span class="index_num warn_bg">1</span>
            <b>工作流+签名人员</b>
          </div>
          <table class="owntable wp100">
            <tr>
              <th colspan="2">工作流</th>
              <th>部门</th>
              <th>签名人员</th>
              <th>签名状态</th>
            </tr>
            <tr>
              <td class="white_bg" colspan="2">编制</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[0].createDeptName }}</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[0].createUserName }}</td>
              <td class="white_bg " :class="{ success_f: detail.guifanFilesProcessRecordList[0].isSign == '1' }">
                {{ detail.guifanFilesProcessRecordList[0].isSign == '1' ? '已签名' : '' }}
              </td>
            </tr>
            <tr>
              <td class="white_bg" colspan="2">审核</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[1].createDeptName }}</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[1].createUserName }}</td>
              <td class="white_bg " :class="{ success_f: detail.guifanFilesProcessRecordList[1].isSign == '1' }">
                {{ detail.guifanFilesProcessRecordList[1].isSign == '1' ? '已签名' : '' }}
              </td>
            </tr>

            <tr v-for="(item, i) in shenheNum - 3" :key="i">
              <td class="white_bg" :rowspan="shenheNum - 3" v-if="i == 0">评审</td>
              <td class="white_bg">{{ i + 1 }}</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[i + 2].createDeptName }}</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[i + 2].createUserName }}</td>
              <td class="white_bg " :class="{ success_f: detail.guifanFilesProcessRecordList[i + 2].isSign == '1' }">
                {{ detail.guifanFilesProcessRecordList[i + 2].isSign == '1' ? '已签名' : '' }}
              </td>
            </tr>
            <tr>
              <td class="white_bg" colspan="2">批准</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[shenheNum - 1].createDeptName }}</td>
              <td class="white_bg">{{ detail.guifanFilesProcessRecordList[shenheNum - 1].createUserName }}</td>
              <td class="white_bg " :class="{ success_f: detail.guifanFilesProcessRecordList[shenheNum - 1].isSign == '1' }">
                {{ detail.guifanFilesProcessRecordList[shenheNum - 1].isSign == '1' ? '已签名' : '' }}
              </td>
            </tr>
          </table>
        </basic-container>
      </el-col>
    </el-row>
    <steps ref="steps"></steps>
    <showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="detail.guifanFilesProcessRecordList"></showhistory>
    <print ref="print" type="1"></print>
  </detailbox>
</template>

<script>
import { getguifanDetail } from '@/api/myapi/tixiwenjian';
export default {
  props: {
    detailId: ''
  },
  data() {
    return {
      radio: '',
      checked: false,
      showpreview: false,
      tableData: [],
      useTemp: false,
      form: {},
      options: [],
      detail: {},
      shenheNum: 0
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    close() {
      this.$emit('close');
    },
    getDetail() {
      getguifanDetail({
        id: this.detailId
      }).then(({ data }) => {
        if (data.success) {
          this.detail = data.data;
          this.shenheNum = data.data.guifanFilesProcessRecordList.length;
		  this.guifanFilesProcessRecordList = data.data.processRecordList;
		  this.checkItem = this.guifanFilesProcessRecordList.find(item=>item.checkStatus==2);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.active {
  background-color: #e6f1fc !important;
  color: #126bc9;
}
</style>
